import React from 'react';
import './StatusBar.css';

// 状态栏组件
const StatusBar = ({ petState }) => {
  const { hunger, happiness, health, energy, cleanliness } = petState;
  
  // 获取状态条的颜色
  const getStatusColor = (value) => {
    if (value > 70) return 'green';
    if (value > 30) return 'yellow';
    return 'red';
  };
  
  return (
    <div className="status-bar">
      <div className="status-item">
        <span className="status-label">饥饿度</span>
        <div className="status-progress">
          <div 
            className="status-fill" 
            style={{ 
              width: `${hunger}%`, 
              backgroundColor: getStatusColor(hunger) 
            }}
          ></div>
        </div>
        <span className="status-value">{hunger}%</span>
      </div>
      
      <div className="status-item">
        <span className="status-label">幸福度</span>
        <div className="status-progress">
          <div 
            className="status-fill" 
            style={{ 
              width: `${happiness}%`, 
              backgroundColor: getStatusColor(happiness) 
            }}
          ></div>
        </div>
        <span className="status-value">{happiness}%</span>
      </div>
      
      <div className="status-item">
        <span className="status-label">健康度</span>
        <div className="status-progress">
          <div 
            className="status-fill" 
            style={{ 
              width: `${health}%`, 
              backgroundColor: getStatusColor(health) 
            }}
          ></div>
        </div>
        <span className="status-value">{health}%</span>
      </div>
      
      <div className="status-item">
        <span className="status-label">能量</span>
        <div className="status-progress">
          <div 
            className="status-fill" 
            style={{ 
              width: `${energy}%`, 
              backgroundColor: getStatusColor(energy) 
            }}
          ></div>
        </div>
        <span className="status-value">{energy}%</span>
      </div>
      
      <div className="status-item">
        <span className="status-label">清洁度</span>
        <div className="status-progress">
          <div 
            className="status-fill" 
            style={{ 
              width: `${cleanliness}%`, 
              backgroundColor: getStatusColor(cleanliness) 
            }}
          ></div>
        </div>
        <span className="status-value">{cleanliness}%</span>
      </div>
    </div>
  );
};

export default StatusBar;